<template>
  <el-dialog v-model="isDialogVisible" title="技术资料" width="860px" @closed="handleClosed" destroy-on-close>
    <el-descriptions class="icafe-descriptions" direction="vertical" :column="4" border>
      <el-descriptions-item label="名称">{{ data.name }}</el-descriptions-item>
      <el-descriptions-item label="联系人">{{ data.contact }}</el-descriptions-item>
      <el-descriptions-item label="联系电话">{{ data.cellphone }}</el-descriptions-item>
      <el-descriptions-item label="所属地区">{{
        $store.getters['showRegions'](data.district_id)
      }}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ data.address }}</el-descriptions-item>
    </el-descriptions>
    <div class="icafe-info">
      <el-tabs v-model="activeName">
        <el-tab-pane label="外网：专线" name="wan">
          <icafe-wan :icafe-id="data.id" :mode="mode"></icafe-wan>
        </el-tab-pane>
        <el-tab-pane label="外网：ADSL" name="adsl">
          <icafe-adsl :icafe-id="data.id" :mode="mode"></icafe-adsl>
        </el-tab-pane>
        <el-tab-pane label="端口镜像" name="mirror">
          <icafe-mirror :icafe-id="data.id" :mode="mode"></icafe-mirror>
        </el-tab-pane>
        <el-tab-pane label="净网先锋" name="cnk">
          <icafe-cnk :icafe-id="data.id" :mode="mode"></icafe-cnk>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import IcafeWan from '../icafe-wan/index.vue'
import IcafeAdsl from '../icafe-adsl/index.vue'
import IcafeMirror from '../icafe-mirror/index.vue'
import IcafeCnk from '../icafe-cnk/index.vue'

export default defineComponent({
  name: 'TechDataDialog',
  props: {
    data: {
      type: Object,
      required: true
    },
    mode: String
  },
  components: { IcafeWan, IcafeAdsl, IcafeMirror, IcafeCnk },
  setup() {
    const isDialogVisible = ref(false)
    const defaultTabName = 'wan'
    const activeName = ref(defaultTabName)

    const visible = (isVisible = false) => {
      isDialogVisible.value = isVisible
    }

    const handleClosed = () => {
      // 重置 tab 选中状态
      activeName.value = defaultTabName
    }

    return {
      isDialogVisible,
      activeName,
      visible,
      handleClosed
    }
  }
})
</script>

<style lang="less" scoped>
.icafe-descriptions {
  margin-bottom: 30px;
}
.icafe-info {
  min-height: 320px;
}
</style>
